<div class="flex items-center gap-4">
    <a href="/page/article-info/{$item->id}"
       class="block flex-none bg-cover bg-center bg-gray-200 w-28 h-28"
       style="background-image: url('{$item->images[0]}')"></a>
    <div class="flex-grow w-10">
        <div class=" font-medium text-base mt-2 truncate">
            <a href="/page/article-info/{$item->id}"
               class="block hover:underline">
                {$item->title}
            </a>
        </div>
        <div class="text-gray-400 mt-2  h-12 leading-6 overflow-hidden">{$item->descriptions}</div>
        <div class="flex mt-2">
            <div class="flex-grow">
                <div class="text-gray-500">
                    <a class="text-blue-600 hover:underline"
                       href="/page/article/{$item->class_id}">{$item->class->name}</a>
                    <span class="mx-2 text-gray-300">/</span> {$item->created_at->format('m-d, Y')}
                </div>
            </div>
            <div class="flex-none">
                <div class="flex items-center gap-2 text-gray-400">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5" fill="none" viewBox="0 0 24 24"
                         stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M15 12a3 3 0 11-6 0 3 3 0 016 0z"/>
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
                              d="M2.458 12C3.732 7.943 7.523 5 12 5c4.478 0 8.268 2.943 9.542 7-1.274 4.057-5.064 7-9.542 7-4.477 0-8.268-2.943-9.542-7z"/>
                    </svg>
                    <div>{$item->view}</div>
                </div>
            </div>
        </div>
    </div>
</div>